<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
  <script type="text/javascript" src="../vue.js"></script>
  <style>
    .one {
      background-color: red;
    }

    .atguigu1 {
      font-size: 20px;
    }

    .atguigu2 {
      color: aqua
    }

    .atguigu3 {
      font-style: italic;
    }
  </style>
</head>

<body>
  <!-- 什么是MVVM M是Model是数据层 v是view 视口层 vm是Vue的核心 viewmodel :当m数据层进行修改的时VM层会监测到变化,并且通知v层进行相应的修改,反之修改v层则会通知m层数据进行修改,从而实现了v和m的相互解耦-->
  <div id="app">
    <!-- v-bind:vue中提供的用于绑定属性的命令，强制绑定数据 简写是: 不过这样是单向绑定 只能获取数据并不能对数据进行修改 -->
    <input type="text" :value="one">
    <!-- class和style的动态绑定 -->
    <!-- 字符串写法适用于：要绑定的样式，类名不确定。 -->
    <div :class="one">hahahaha</div>
    <!-- 对象的写法适用于:要绑定的样式,个数确定,类名也确定,但不确定用不用 -->
    <div :class="two">随便写写</div>
    <!-- 数组写法适用于:要绑定的样式,个数不确定,类名也不确定 -->
    <div :class="arr">数组的写法</div>
    <!-- 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。 -->
    <div :style="StyleSheet">
      style的样式写法
    </div>
  </div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false
  const vm = new Vue({
    // 配置对象:属性名固定的对象
    el: "#app",//element元素,用来指定当前的vue实例服务哪个容器哦
    data() {//数据
      return {
        one: 'one',
        two: {
          atguigu1: true,
          atguigu2: true,
          atguigu3: true,
        },
        arr: [
          {
            atguigu1: true,
          }, {
            atguigu3: true,
          }
        ],
        StyleSheet: {
          color: 'red',
          backgroundColor: 'blue'
        }
      }
    }
  })
</script>

</html>